<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
	<head>
		<title>仪表盘</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript" src="${ctxStatic}/scripts/echarts/echarts.min.js"></script>
		<script type="text/javascript">
			function gaugeOption(value){
				return {
					    	series : [
							        {
							            type:'gauge',
							            radius:'100%',
							            title:{ show:false, offsetCenter:[ '0' ,'-40%'] },
							            detail : { formatter:'{value}%' },
							            splitLine:{ length:15 },
							            axisLine:{ lineStyle: { width:15 } },
							            pointer:{ length:'55%', width:5 },
							            data:[{ value: value, name: '总耗课率' }]
							        }
							    ]
							};
			}
			
			function lineOption(xData,yData){
				
				if(!xData)
					xData = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
				
				if(!yData)
					yData = [0,0,0,0,0,0,0,0,0,0,0,0];
				return {
	        	    grid: {
	        	        left: '3%',
	        	        right: '3%',
	        	        top: '3%',
	        	        bottom: '3%',
	        	        containLabel: true
	        	    },
	        	    tooltip : {
	        	        trigger: 'axis'
	        	    },
	        	    xAxis : [
	        	        {
	        	            type : 'category',
	        	            boundaryGap : false,
	        	            data : xData
	        	        }
	        	    ],
	        	    yAxis : [
	        	        {
	        	            type : 'value'
	        	        }
	        	    ],
	        	    series : [
	        	        {
	        	            name:'合同金额',
	        	            type:'line',
	        	            smooth:true,
	        	            stack: '金额',
	        	            areaStyle: {normal: {}},
	        	            data:yData
	        	        }
	        	    ]
	        	}
			}
			
			$(function(){
				// 基于准备好的dom，初始化echarts实例
		        var contract_total = echarts.init(document.getElementById('gauge-contract-total'));
		        var contract = echarts.init(document.getElementById('gauge-contract'));
		        var rate_total = echarts.init(document.getElementById('gauge-rate-total'));
		        var rate = echarts.init(document.getElementById('gauge-rate'));

		        // 使用刚指定的配置项和数据显示图表。
		        var gauge1 = parseInt('${dashboard.totalCourseRate["money1"]}');
		        var gauge1_ = parseInt('${dashboard.totalCourseRate["money"]}');
		        
		        var rate1 = 0;
		        if(gauge1_!=0){
		        	rate1 = parseInt((gauge1 / gauge1_)*100);
		        }
		        
		        contract_total.setOption(gaugeOption(rate1));
		        
		        
		        var gauge2 = parseInt('${dashboard.yearCourseRate["money1"]}');
		        var gauge2_ = parseInt('${dashboard.yearCourseRate["money"]}');
		        
		        var rate2 = 0;
		        if(gauge2_!=0){
		        	rate2 = parseInt((gauge2 / gauge2_)*100);
		        }
		        contract.setOption(gaugeOption(rate2));
		        
		        var gauge3 = parseInt('${dashboard.totalAttendRate["signCount"]}');
		        var gauge3_ = parseInt('${dashboard.totalAttendRate["orderCount"]}');
		        
		        var rate3 = 0;
		        if(gauge3_!=0){
		        	rate3 = parseInt((gauge3 / gauge3_)*100);
		        }
		        rate_total.setOption(gaugeOption(rate3));
		        
		        
		        var gauge4 = parseInt('${dashboard.yearAttendRate["signCount"]}');
		        var gauge4_ = parseInt('${dashboard.yearAttendRate["orderCount"]}');
		        
		        var rate4 = 0;
		        if(gauge4_!=0){
		        	rate4 = parseInt((gauge4 / gauge4_)*100);
		        }
		        rate.setOption(gaugeOption(rate4));
		        
		        var grid_left = echarts.init(document.getElementById('grid-left'));
		        var grid_right = echarts.init(document.getElementById('grid-right'));
		        
		        var xData,yData;
		        
		        <c:if test="${not empty dashboard.lastYearContract}">
		        xData = [];
		        yData = [];
		        <c:forEach items="${dashboard.lastYearContract}" var="item" >  
		            xData.push('${item["MONTH"]}');
		            yData.push(parseInt('${item["SUM1"]}'));
		        </c:forEach>  
		        </c:if>
		        grid_left.setOption(lineOption(xData,yData));
		        xData = '';
		        yData = '';
		        <c:if test="${not empty dashboard.thisYearContract}">
		        xData = [];
		        yData = [];
		        <c:forEach items="${dashboard.thisYearContract}" var="item" >  
		            xData.push('${item["MONTH"]}');
		            yData.push(parseInt('${item["SUM1"]}'));
		        </c:forEach>  
		        </c:if>
		        grid_right.setOption(lineOption(xData,yData));
			});
		</script>
		<style type="text/css">
			.clear { clear: both;}
			.layout{ margin: 0px auto; width:880px; }
			.member{}
			.member .member-count{float:left;}
			.member .member-count span{display:block; line-height:24px; color:#0000FF;}
			.member .member-score {float:left; margin-left:20px;}
			.member .member-score td {color:#0000FF;}
			.member .member-score td.score-title {color:#999999;}
			
			.table-border{ width:190px; border:solid 1px #000;}
			.table-border td{ width:50%; border:solid 1px #000; padding: 3px 15px; }
			
			.gauge-left { float:left; }
			.gauge-right { float:left; margin-left:40px;}
			.gauge { float:left; width:190px; margin-right:20px; }
			.gauge-chart {width:190px;height:190px;}
			.gauge-title {text-align: center; padding:10px 0px;}
			
			.grid { float:left; width:420px;  }
			.grid-left { margin-right:30px; }
			.grid-chart {width:420px;height:240px;}
			.grid-title {text-align: center; padding:10px 0px;}
		</style>
	</head>
	<body>
		<div class="layout">
			<!-- 会员统计 -->
			<div class="member">
				<div class="member-count">
					<p>会员数量<span>${dashboard.memberCount}</span></p>
					<p>耗课时数<span>${dashboard.courseCount}</span></p>
				</div>
				<div class="member-score">
					<table>
						<tr>
							<th></th>
							<th>中心评分</th>
							<th>平均</th>
						</tr>
						<tr>
							<td class="score-title">总体评价：</td>
							<td>
							<c:if test="${not empty dashboard.comment}">
							${dashboard.comment[0]["score"]}
							</c:if>
							</td>
							<td>
							<c:if test="${not empty dashboard.comment}">
							${dashboard.comment[1]["score"]}
							</c:if>
							</td>
						</tr>
						<tr>
							<td class="score-title">环境评价：</td>
							<td>
							<c:if test="${not empty dashboard.comment}">
							${dashboard.comment[0]["score1"]}
							</c:if>
							</td>
							<td>
							<c:if test="${not empty dashboard.comment}">
							${dashboard.comment[1]["score1"]}
							</c:if>
							</td>
						</tr>
						<tr>
							<td class="score-title">老师评价：</td>
							<td>
							<c:if test="${not empty dashboard.comment}">
							${dashboard.comment[0]["score2"]}
							</c:if>
							</td>
							<td>
							<c:if test="${not empty dashboard.comment}">
							${dashboard.comment[1]["score2"]}
							</c:if>
							</td>
						</tr>
						<tr>
							<td class="score-title">服务态度：</td>
							<td>
							<c:if test="${not empty dashboard.comment}">
							${dashboard.comment[0]["score3"]}
							</c:if>
							</td>
							<td>
							<c:if test="${not empty dashboard.comment}">
							${dashboard.comment[1]["score3"]}
							</c:if>
							</td>
						</tr>
					</table>
				</div>
				<div class="clear"></div>
			</div>
			
			<!-- 课时统计 -->
			<div>
				<div class="gauge-left">
					<div class="gauge">
						<div class="gauge-title">总耗课率</div>
						<div class="gauge-chart" id="gauge-contract-total"></div>
						<table class="table-border">
							<tr>
								<td>合同总额</td>
								<td>
								<c:if test="${not empty dashboard.totalCourseRate}">
									${dashboard.totalCourseRate["money"]}
								</c:if>
								</td>
							</tr>
							<tr>
								<td>耗课总额</td>
								<td><c:if test="${not empty dashboard.totalCourseRate}">
									${dashboard.totalCourseRate["money1"]}
								</c:if></td>
							</tr>
						</table>
					</div>
					
					<div class="gauge">
						<div class="gauge-title">本年耗课率</div>
						<div class="gauge-chart" id="gauge-contract"></div>
						<table class="table-border">
							<tr>
								<td>合同总额</td>
								<td>
								<c:if test="${not empty dashboard.yearCourseRate}">
									${dashboard.yearCourseRate["money"]}
								</c:if>
								</td>
							</tr>
							<tr>
								<td>耗课总额</td>
								<td>
								<c:if test="${not empty dashboard.yearCourseRate}">
									${dashboard.yearCourseRate["money1"]}
								</c:if>
								</td>
							</tr>
						</table>
					</div>
					<div class="clear"></div>
				</div>
				<div class="gauge-right">
					<div class="gauge">
						<div class="gauge-title">总出勤率</div>
						<div class="gauge-chart" id="gauge-rate-total"></div>
						<table class="table-border">
							<tr>
								<td>签到总数</td>
								<td>
								<c:if test="${not empty dashboard.totalAttendRate}">
									${dashboard.totalAttendRate["signCount"]}
								</c:if>
								</td>
							</tr>
							<tr>
								<td>预约总数</td>
								<td>
								<c:if test="${not empty dashboard.totalAttendRate}">
									${dashboard.totalAttendRate["orderCount"]}
								</c:if>
								</td>
							</tr>
						</table>
					</div>
					
					<div class="gauge">
						<div class="gauge-title">本年出勤率</div>
						<div class="gauge-chart" id="gauge-rate"></div>
						<table class="table-border">
							<tr>
								<td>签到总数</td>
								<td>
								<c:if test="${not empty dashboard.yearAttendRate}">
									${dashboard.yearAttendRate["signCount"]}
								</c:if>
								</td>
							</tr>
							<tr>
								<td>预约总数</td>
								<td>
								<c:if test="${not empty dashboard.yearAttendRate}">
									${dashboard.yearAttendRate["orderCount"]}
								</c:if>
								</td>
							</tr>
						</table>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			
			<!-- 合同统计 -->
			<div>
				<div class="grid grid-left">
					<div class="grid-title">去年新签合同趋势</div>
					<div class="grid-chart" id="grid-left"></div>
				</div>
				
				<div class="grid grid-right">
					<div class="grid-title">本年新签合同趋势</div>
					<div class="grid-chart" id="grid-right"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</body>
</html>
